<template>
	<view class="detail" :style="{'background':bgColor}">
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<view class="detail_bg">
			<u-sticky offset-top="64">
				<view class="" style="background: #3c9cff;">
					<view class="user">
						<view class="user_left">
							<image src="../../static/images/20171017215814_fwPMQ.jpeg" mode=""></image>
							<text>晓袁同学</text>
						</view>
						<view class="user_btn">
							<text>关注</text> <u-icon name="plus-circle-fill" color="#3c9cff" size="14"></u-icon>
						</view>
					</view>
					<view class="" style="padding: 15rpx 0;">
						<u-notice-bar :text="text1" bgColor="#fff" style="border-radius: 30rpx;"></u-notice-bar>
					</view>
				</view>
			</u-sticky>
			<scroll-view scroll-y="true" >
				<u-swiper :list="list4" keyName="url" :autoplay="false" height="240" :circular="true"></u-swiper>
				<!-- 正文 -->
				<view class="title">建军节</view>
				<view class="table">
					<view class="table_bg">
						<view class="table_bg_top">
							<view class="table_meun">
								<text class="table_num">96</text>
								<text class="table_text">参赛人数</text>
							</view>
							<view class="table_line"></view>
							<view class="table_meun">
								<text class="table_num">912666</text>
								<text class="table_text">总赞数</text>
							</view>
							<view class="table_line"></view>
							<view class="table_meun">
								<text class="table_num">96595466</text>
								<text class="table_text">浏览人数</text>
							</view>
						</view>
						<view class="table_title">距离点赞结束只有 4 天 12 小时 24 分钟</view>
					</view>
				</view>
				<!-- 搜索 -->
				<view class="search">
					<input type="text" placeholder="搜索编号或者名字" class="search_input"/>
					<text class="search_text">搜索</text>
				</view>
				<!-- 列表 -->
				<view class="list">
					<view class="list_title">
						<view class="list_title_left">
							<image src="../../static/images/yuan.png" mode=""></image>
							<text>参与投票</text>
						</view>
						<view class="">
							<text>默认</text>
							<text>最新</text>
						</view>
					</view>
					<view class="list_view">
						<view class="list_meun" v-for="(item,index) in 9" :key="index">
							<view class="">
								<image src="../../static/images/bg.png" mode="" class="list_meun_img"></image>
							</view>
							<view class="list_meun_name">陆军工程大学宣传片</view>
							<view class="list_meun_num">123564票</view>
							<view class="list_meun_btn">
								<view class="list_meun_btn_left">拉票</view>
								<view class="list_meun_btn_right">投票</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="footer_left">
				<view class="footer_left_meun " :class="active == 1 ? 'active' : ''" @click="tabs(1)">
					<image src="../../static/images/detail01.png" mode=""></image>
					<text>活动首页</text>
				</view>
				<view class="footer_left_meun" :class="active == 2 ? 'active' : ''" @click="tabs(2)">
					<image src="../../static/images/detail02.png" mode=""></image>
					<text>点赞排名</text>
				</view>
				<view class="footer_left_meun" :class="active == 3 ? 'active' : ''" @click="tabs(3)">
					<image src="../../static/images/detail03.png" mode=""></image>
					<text>活动详情</text>
				</view>
			</view>
			<view class="footer_btn">
				<image src="../../static/images/detail04.png" mode=""></image>
				<text>分享</text>
			</view>
		</view>
		<view class="button" @click="add">
			<u-icon name="plus" color="#ffffff" size="14"></u-icon>
			<text>新建</text>
		</view>
	</view>
</template>

<script>
import { detailAPI } from '@/api/home';
export default {
	data() {
		return {
			bgColor: '#3c9cff',
			title: '建军节',
			active:1,
			id: '',
			info: [],
			idcard: '',
			text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
			list4: [
				{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			]
		};
	},

	mounted() {
		
	},
	onLoad(options) {
		this.id = options.id;
	},
	onShow() {
		this.getDetail()
	},
	methods: {
		getDetail(){
			var parems = {
				token:uni.getStorageSync('accessToken'),
				id:this.id
			}
			detailAPI(parems).then(res =>{
				if(res.code == 1){
					
				}else{
					if(res.code == 2){
						uni.showToast({
							title:res.data,
							icon:'none',
						})
						setTimeout(() => {
							uni.navigateTo({
								url:'../auth/auth'
							})
						}, 1000)
					}else {
						wx.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}
			})
		},
		tabs(data){
			this.active = data
		},
		add(){
			uni.navigateTo({
				url:'../create/create'
			})
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
</style>
<style scoped lang="scss">
	/deep/.u-notice-bar{
		border-radius: 40rpx !important;
		margin: 0 30rpx !important;
	}
.detail {
	// height: 100%;
	// background-color: #3c9cff;
	.button{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #f5b018;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		right: 2vw;
		bottom: 40vw;
		text{
			font-size: 26rpx;
			color: #fff;
			margin-top: 5rpx;
		}
	}
	.active{
		background: #33333333;
		border-radius: 90rpx 90rpx 0 0;
		padding: 14rpx 0;
		transition: 2s;
	}
	.detail_bg{
		margin-top: 128rpx;
		.user{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:  0 30rpx;
			margin: 15rpx 0;
			background: #3c9cff;
			.user_left{
				display: flex;
				align-items: center;
				image{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					background: #fff;
				}
				text{
					font-size: 34rpx;
					color: #fff;
					margin-left: 15rpx;
					font-weight: bold;
				}
			}
			.user_btn{
				background: #FFE488;
				width: 150rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100rpx;
				text{
					font-size: 28rpx;
					color: #333333;
					margin-right: 15rpx;
				}
			}
		}
		.title{
			font-size: 40rpx;
			color: #fff;
			font-weight: bold;
			letter-spacing: 2rpx;
			text-align: center;
			padding: 0 30rpx;
			margin: 30rpx 0;
		}
		.table{
			padding: 0 30rpx;
			.table_title{
				font-size: 28rpx;
				color: #fff;
				font-weight: bold;
				margin-top: 20rpx;
			}
			.table_bg{
				background:RGBA(255, 255, 255, 0.3);
				border-radius: 20rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 0 30rpx;
				.table_bg_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
				}
				.table_meun{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				.table_num{
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
				}
				.table_text{
					font-size: 28rpx;
					color: #fff;
					margin-top: 10rpx;
				}
				.table_line{
					width: 2rpx;
					height: 80rpx;
					background: #fff;
				}
			}
		}
		
	}
	.search{
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
		.search_input{
			width: 475rpx;
			height: 75rpx;
			background: #fff;
			font-size: 28rpx;
			border-radius: 100rpx;
			outline: none;
			border: none;
			padding: 0 20rpx;
		}
		.search_text{
			width: 150rpx;
			height: 75rpx;
			border: 1rpx solid #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
			border-radius: 100rpx;
			letter-spacing: 2rpx;
		}
	}
	
	.list{
		padding: 30rpx;
		box-sizing: border-box;
		background:RGBA(255, 255, 255, 0.3);
		padding-bottom: 200rpx;
		.list_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
		.list_title_left{
			display: flex;
			align-items: center;
			image{
				width: 45rpx;
				height: 45rpx;
			}
			text{
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
				margin-left: 20rpx;
			}
		}
		.list_view{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.list_meun{
			width: 48%;
			background: #fff;
			border-radius: 24rpx;
			margin-bottom: 24rpx;
		}
		.list_meun_img{
			width: 100%;
			height: 200rpx;
			border-radius: 24rpx;
		}
		.list_meun_name{
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-top: 24rpx;
			text-align: center;
		}
		.list_meun_num{
			font-size: 28rpx;
			color: #333;
			margin-top: 18rpx;
			text-align: center;
		}
		.list_meun_btn{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}
		.list_meun_btn_left{
			width: 50%;
			height: 75rpx;
			font-size: 28rpx;
			color: #fff;
			background: #FFE488;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 24rpx 0 0 24rpx;
		}
		.list_meun_btn_right{
			width: 50%;
			height: 75rpx;
			font-size: 28rpx;
			color: #fff;
			background: #3c9cff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 0 24rpx 24rpx 0;
		}
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #3c9cff;
		box-shadow: 0 0 24rpx 0 rgba(0,0,0,0.08);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.footer_left{
			display: flex;
			padding-left: 30rpx;
			
			.footer_left_meun{
				width: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 14rpx 0;
				image{
					width: 55rpx;
					height: 55rpx;
				}
				text{
					font-size: 24rpx;
					color: #fff;
					margin-top: 4rpx;
				}
			}
		}
		.footer_btn{
			background: #fff;
			width: 310rpx;
			height: 75rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100rpx;
			margin-right: 30rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			text{
				font-size: 28rpx;
				color: #3c9cff; 
				margin-left: 15rpx;
				font-weight: bold;
			}
		}
	}
}
</style>
